<template>
  <!-- 线索列表 -->
  <view class="leadReporting">
    <u-tabs :list="list" lineColor="#2488F5" lineWidth="25" :current="activeIndex" :inactiveStyle="inactiveStyle"
      :activeStyle="{ color: '#333333' }" @click="tabsClick"></u-tabs>

    <view class="wrapper-content" :class="activeIndex == 0 ? 'wrapper-conHeight' : ''">
      <template v-if="activeIndex == 0">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
          <view class="allList wrapper-item" v-for="(item, i) in dataSource" :key="i" :data-url="`/conflictDisputeReporting/conflictDisputeDetails/conflictDisputeDetails?data=${encodeURIComponent(
              JSON.stringify({ ...item, index: activeIndex })
            )}`" @click="handleClickRouter">
            <view class="rtEmployee">
              <view class="line2-hidden title">
                {{ item.disputesTitle || "" }}
              </view>
              <view class="line-hidden footer">
                发生地点：<text>{{ item.discoverySite }}</text>
              </view>
              <view class="line-hidden footer">
                提交时间：<text>{{ item.discoveryTime || "" }}</text>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <template v-if="activeIndex == 1">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" @scroll="scrollHeight" :style="[
            {
              height: !loading && !noMore ? '100%' : '100%',
            },
          ]" v-if="dataSource.length">
          <view class="allList wrapper-item" v-for="(item, i) in dataSource" :key="i" :data-url="`/conflictDisputeReporting/conflictDisputeDetails/conflictDisputeDetails?data=${encodeURIComponent(
              JSON.stringify({ ...item, index: activeIndex })
            )}`" @click="handleClickRouter">
            <view class="rtEmployee">
              <view class="line2-hidden title">
                {{ item.disputesTitle || "" }}
              </view>
              <view class="line-hidden footer">
                处理时间：<text>{{ item.processingTime }}</text>
              </view>
              <view class="line-hidden footer">
                处理民警：<text>{{ item.policeName || "" }}</text>
              </view>
            </view>
          </view>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
      </template>

      <view v-if="!dataSource.length">
        <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
        </u-empty>
      </view>
    </view>

    <view class="btns" v-if="activeIndex == 0">
      <button class="submit-btn" type="primary" style="width: 100%"
        :data-url="`/conflictDisputeReporting/conflictDisputeReporting/conflictDisputeAddition`"
        @click="handleClickRouter">
        矛盾纠纷上报
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    disputes_page
  } from "@/api/home.js";
  import {
    handleClickRouter
  } from "@/utils/util.js";

  export default {
    data() {
      return {
        activeIndex: 0,
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        scrollTop: 0,
        list: [{
            name: "待处理",
            badge: {
              isDot: false,
            },
          },
          {
            name: "已处理",
            badge: {
              isDot: false,
            },
          },
        ],
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    onLoad() {
      this.scrollTop = 0;
      uni.removeStorageSync("scrollTop");

      this.activeIndex == 0;
      this.pageConfig.pageNo = 1;
      this.dataSource = [];
      this.getList();
    },
    onShow() {
      this.scrollTop = uni.getStorageSync("scrollTop") || 0;

      let disputes = uni.getStorageSync("disputes");
      if (disputes) {
        this.activeIndex == 0;
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
        uni.setStorageSync("disputes", false);
      }
    },
    methods: {
      handleClickRouter,
      scrollHeight(e) {
        uni.setStorageSync("scrollTop", e.detail.scrollTop);
      },
      scrollBottom(e) {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      tabsClick(item) {
        this.scrollTop = 0;
        uni.removeStorageSync("scrollTop");

        this.activeIndex = item.index;
        this.pageConfig.pageNo = 1;
        this.dataSource = [];
        this.getList();
      },

      async getList() {
        let data = {
          handleStatus: this.activeIndex + 1,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };

        let {
          result
        } = await disputes_page(data);
        this.dataSource = result.records;
        this.pageConfig.total = result.total;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .leadReporting {
    height: 100%;

    .wrapper-content {
      padding: 24rpx 16rpx;
      background: #f8f9fb;
      height: calc(100vh - 45px);

      .wrapper-item {
        padding: 30rpx 50rpx;
        margin-bottom: 10rpx;
        height: 260rpx;
        background: #ffffff;
        border-radius: 16rpx;
        border: 1rpx solid #eceaea;

        .rtEmployee {
          line-height: 53rpx;
          width: 100%;
          font-family: PingFang SC, PingFang SC;

          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
          }

          .footer {
            font-weight: 400;
            font-size: 26rpx;
            color: #a2a2a2;

            text {
              font-weight: 500;
              font-size: 26rpx;
              color: #1a1a1a;
            }
          }
        }
      }
    }

    .wrapper-conHeight {
      height: calc(100vh - 114px);
    }
  }
</style>